<template>
	<div id="box">
		<button type="button" id="backButton" @click="goBack()">返回介绍页</button>
		<p id="mainTitle" >{{title}}</p>
		<audio controls="controls" style="position: absolute;right: 50px;top: 10px;height: 30px;" ref="myAudio" id="myAudio">
		  <source  type="audio/ogg">
		  <source :src="musicUrl" type="audio/mpeg">
		</audio>
	</div>
</template>

<script>
	export default{
		props:{
			title:String,
			musicUrl:String,
		},
		mounted() {
			// console.log(this.musicUrl)
      // this.autoPlay()
		},
		methods:{
			goBack(){
				this.$router.push({"path":"/NatoAndWto"})
			},
      autoPlay(){
			  var myAudioDom = this.$refs.myAudio;
        myAudioDom.autoplay = true ;
        myAudioDom.loop = true ;
        myAudioDom.volume = "0.3" ;
        myAudioDom.play() ;
      }
		}
	}
	
</script>

<style scoped="scoped">
	p{
		margin: 0;
		padding: 0;
	}
	#box{
		position: relative;
		align-items: center;
		height: 80px;
		background-image: url(../../../public/img/component/head_bg.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	#backButton{
		position: absolute;
		top: 10px;
		left: 55px;
		width: 140px;
		background-color:#0c1644;
		border-radius: 10px;
		font-size: 20px;
		letter-spacing: 5px;
		color: white;
		font-weight:700;
		border: none;
		transition-duration: 1s;
	}
	#backButton:hover{
		background-color: white;
		color:#0c1644;
	}
	
	#mainTitle{
		font-size: 40px;
		font-weight: 700;
		line-height: 70px;
		text-align: center;
		letter-spacing: 4px;
		color: #FFFFFF;
	}
	

</style>
